<template>
  <view class="container">
    <u-navbar
      class="custom-navbar"
      title="首页"
      :is-back="false"
      :title-bold="false"
    ></u-navbar>
    <div class="user-info">
      <div class="welcome-text">欢迎 {{ userInfo.realName || userInfo.username }}</div>
      <u-button class="logout-btn" size="mini" @click="onLoginOutClick"
        >退出登录</u-button
      >
    </div>
    <!-- 主内容区域 -->
    <!-- 有商务接待订单权限，才显示内容 -->
    <div class="list-wrapper" v-if="hasPermission">
      <div class="tabs-list">
        <div
          class="tabs-item"
          :class="{ active: tabsConfig.current == index }"
          v-for="(tab, index) in tabsConfig.list"
          @click="onTabsChange(index)"
        >
          <div class="tabs-item-text">{{ tab.text }}({{ tab.number }})</div>
          <div class="tabs-item-line">
            <div class="tabs-item-line-inner"></div>
          </div>
        </div>
      </div>
      <div class="order-list">
        <scroll-view
          style="height: 100%"
          :scroll-top="scrollTop"
          scroll-y
          :scroll-with-animation="true"
          refresher-enabled
          :refresher-triggered="refreshStatus"
          :enable-back-to-top="true"
          @refresherrefresh="resetRefresh(true)"
          @scrolltolower="reachBottom"
        >
          <OrderItem
            v-for="record in dataSource"
            :key="record.id"
            :record="record"
            @cancel="onCancelClick"
            @confirm="onConfirmClick"
          />
          <!-- 加载结束列表为空时展示 -->
          <view
            class="empty-wrap"
            v-if="dataSource.length == 0 && loadStatus == 'nomore'"
          >
            <image
              class="empty-image"
              mode="aspectFit"
              src="../static/images_qccx/empty.png"
            />
            <view class="empty-text">暂无数据</view>
          </view>
          <!-- 底部加载状态 -->
          <u-loadmore v-else margin-top="20" :status="loadStatus" />
        </scroll-view>
      </div>
    </div>
    <!-- 无权限 -->
    <div class="empty-permission" v-else>
      <view class="empty-wrap">
        <image
          class="empty-image"
          mode="aspectFit"
          src="../static/images_qccx/empty.png"
        />
        <view class="empty-text">暂无订单信息</view>
      </view>
    </div>
    <!-- 取消浮框 -->
    <CancelPopup
      ref="cancelPopupRef"
      title="取消订单"
      @success="handleSuccess"
    />
    <!-- 取消弹窗 -->
    <CancelModal
      ref="cancelModalRef"
      @success="handleSuccess"
    />
    <!-- 确认接单 -->
    <ConfirmModal ref="confirmModalRef" @success="handleSuccess" />
  </view>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import { orderStatistics } from "@/api/qccx";
import ListMixin from "./mixins/listMixin.js";
import OrderItem from "./components/order-item.vue";
import CancelPopup from "./components/cancel-popup.vue";
import CancelModal from "./components/cancel-modal.vue";
import ConfirmModal from "./components/confirm-modal.vue";
export default {
  mixins: [ListMixin],
  data() {
    return {
      tabsConfig: {
        list: [
          { text: "待确认订单", number: 0, status: 1 },
          { text: "待分发订单", number: 0, status: 10 },
          { text: "已分发订单", number: 0, status: 20 },
        ],
        current: 0,
      },
      queryParam: {
        pageSize: 10,
      },
      apiMethods: {
        list: "/qms/geOrderInfo/pageList",
      },
    };
  },
  components: {
    OrderItem,
    CancelPopup,
    CancelModal,
    ConfirmModal,
  },
  computed: {
    ...mapGetters(["userInfo", "menuMap"]),
    // 是否有权限
    hasPermission() {
      return this.menuMap.includes("sqms:order:shortOrder:list");
    },
  },
  methods: {
    ...mapActions(["LOG_OUT"]),
    ...mapMutations(["CLEAR_USER_INFO"]),
    /**
     * 取消
     */
    onCancelClick(record) {
      // 待确认状态
      if (record.status == 1) {
        this.$refs.cancelModalRef.show(record)
      } else {
        this.$refs.cancelPopupRef.show(record);
      }
    },
    /**
     * 确认接单
     */
    onConfirmClick(record) {
      this.$refs.confirmModalRef.show(record);
    },
    /**
     * 退出登录
     */
    onLoginOutClick() {
      uni.showModal({
        title: "提示",
        content: "是否要退出当前账号？",
        success: (res) => {
          if (res.confirm) {
            this.LOG_OUT().then(() => {
              this.CLEAR_USER_INFO()
              if (window.WeixinJSBridge) {
                WeixinJSBridge.call("closeWindow");
              } else {
                uni.reLaunch({
                  url: "/pages_qccx/login",
                });
              }
            });
          }
        },
      });
    },
    /**
     * tabs 切换
     */
    onTabsChange(index) {
      this.tabsConfig.current = index;
      // 更新 queryParam
      this.queryParam.status =
        this.tabsConfig.list[this.tabsConfig.current].status;
      this.loadData(1);
    },
    /**
     * 获取订单数量统计
     */
    getOrderStatistics(callback) {
      orderStatistics({}).then((res) => {
        const result = res.result;
        const { givedNumber, toConfirmNumber, toGiveNumber } = result;
        this.tabsConfig.list.forEach((item, index) => {
          // 待确认
          if (index == 0) item.number = toConfirmNumber;
          // 待分发
          if (index == 1) item.number = toGiveNumber;
          // 已分发
          if (index == 2) item.number = givedNumber;
        });

        callback && callback(toConfirmNumber, toGiveNumber, givedNumber);
      });
    },
    handleSuccess() {
      this.loadData(1);
      this.getOrderStatistics();
    },
  },
  mounted() {
    // 如果有 userInfo 代表显示是登录态
    if (this.userInfo) {
      if (this.hasPermission) {
        this.getOrderStatistics((toConfirmNumber, toGiveNumber, givedNumber) => {
          // 根据数量初始化 current
          // 默认选中待确认，当待确认数量为0，选中待分发，依此类推，当数量都为0，选中待确认
          let current = 0;
          if (toConfirmNumber) {
            current = 0;
          } else if (toGiveNumber) {
            current = 1;
          } else if (givedNumber) {
            current = 2;
          }
          this.tabsConfig.current = current;
          // 更新 queryParam
          this.queryParam.status =
            this.tabsConfig.list[this.tabsConfig.current].status;

          // 获取数据
          this.loadData(1);
        });

        // 修改确认|分发|重新分发后更新列表
        uni.$on("success", this.handleSuccess);
      }
    } else {
      uni.reLaunch({
        url: '/pages_qccx/login',
      })
    }
  },
  unmounted() {
    uni.$off("success", this.handleSuccess);
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  .custom-navbar {
    flex-shrink: 0;
  }
  .user-info {
    flex-shrink: 0;
    height: 96rpx;
    line-height: 96rpx;
    padding: 0 38rpx 0 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .welcome-text {
      font-size: 28rpx;
      color: #1a1a1a;
    }
    .logout-btn {
      width: 128rpx;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      border: 2rpx solid #c1c1c1;
      font-size: 24rpx;
      margin: 0;
      color: #767676;
    }
  }
  .list-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .tabs-list {
      height: 96rpx;
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      padding: 0 40rpx;
      background: #ffffff;
      border-top: 1rpx solid #ebedf0ff;
      .tabs-item {
        color: #1a1a1a;
        position: relative;
        padding-top: 26rpx;
        .tabs-item-text {
          height: 44rpx;
          line-height: 44rpx;
          font-size: 28rpx;
        }
        .tabs-item-line {
          width: 100%;
          margin-top: 8rpx;
          background: transparent;
          .tabs-item-line-inner {
            width: 60rpx;
            height: 4rpx;
            margin: 0 auto;
          }
        }
      }
      .tabs-item.active {
        color: #ff874fff;
        .tabs-item-line {
          .tabs-item-line-inner {
            background: #ff874f;
          }
        }
      }
    }
    .order-list {
      padding: 24rpx;
      flex: 1;
      overflow: hidden;
      background: #f9fafd;
      position: relative;
    }
  }
  .empty-wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200rpx;
    margin-top: -168rpx;
    image {
      width: 400rpx;
      height: 260rpx;
    }
    .empty-text {
      height: 44rpx;
      font-size: 28rpx;
      color: #767676;
      line-height: 44rpx;
      margin-top: 32rpx;
    }
  }
  .empty-permission {
    position: relative;
    flex: 1;
  }
}
</style>
